import { App, Checkbox } from 'antd'
import cs from 'classnames'
import Image from 'next/image'
import { Dispatch, SetStateAction, useState } from 'react'
import { useSelector } from 'react-redux'

import { EnumsRes, Violation } from '@/api/interface'
import { CreateViolation } from '@/api/modules/entity'
import arrowPre from '@/assets/images/arrow-pre.png'
import file from '@/assets/images/file.png'
import styles from '@/pages/entityForm/styles/index.module.less'
import { GlobalState } from '@/store'

interface Props {
  t: any
  lang: string
  enums: { [key: string]: EnumsRes[] }
  violation: Partial<Violation>
  setSetup: Dispatch<SetStateAction<number>>
}

export default function ReviewAndConfirm({ t, lang, enums, violation, setSetup }: Props) {
  const { message } = App.useApp()

  const userInfo = useSelector((state: GlobalState) => state.userInfo)

  const complainantRole = [
    { key: 'CUSTOMER', value: { en: 'Customer', ar: 'متعامل' } },
    { key: 'CONTRACTOR', value: { en: 'Contractor', ar: 'متعاقد' } },
    { key: 'EMPLOYEE', value: { en: 'Employee', ar: 'موظف' } },
    { key: 'EX_EMPLOYEE', value: { en: 'Ex-Employee', ar: 'موظف سابق' } },
    { key: 'WHISTLEBLOWER', value: { en: 'Whistleblower', ar: 'المبلغ' } },
    { key: 'OTHER', value: { en: 'Other', ar: 'أخرى' } },
  ]

  const [checked, setChecked] = useState(false)

  const filterEnum = (key: string, type: string) => {
    if (!key) return '--'
    const item = enums[type]?.find((item) => item.key === key)!
    return <>{item.value[lang === 'en-US' ? 'en' : 'ar']}</>
  }

  const filterViolationEnum = (keys: string[], type: string) => {
    if (!keys) return '--'
    let formattedValues = ''
    keys.forEach((key, index) => {
      const enumItem = enums[type]?.find((enumValue) => key === enumValue.key)!
      const valueToUse = enumItem.value[lang === 'en-US' ? 'en' : 'ar']
      formattedValues += valueToUse
      if (index !== keys.length - 1) formattedValues += ', '
    })
    return formattedValues
  }

  const submit = async () => {
    if (!checked) return message.warning(t['form.confirm.checkbox.warning'])
    const params = JSON.parse(JSON.stringify(violation))
    if (params.type === 'A') params.violationTypeB = null
    if (params.type === 'B') params.violationTypeA = null
    delete params.violationDateValue
    delete params.incidentDiscoveredDateValue
    delete params.complianceDateValue
    delete params.type
    console.log(params)
    try {
      await CreateViolation({
        ...params,
        fullName: lang === 'en-US' ? userInfo.fullName : userInfo.fullNameAr,
        email: userInfo.email,
        mobile: userInfo.mobile,
        complainantRole: complainantRole[2].key,
        source: 'EMAIL',
      })
      setSetup(3)
    } catch (_) {}
  }

  const formatterMobile = (mobile: string) => {
    let result = '--'
    if (mobile) {
      result = mobile.startsWith('0') ? `+971${mobile.slice(1)}` : `+971${mobile}`
    }
    return result
  }

  return (
    <div className={styles['form-confirm']}>
      <h2 className={styles['form-title-h2']}>{t['form.confirm.title']}</h2>
      <div className={styles['form-confirm-line']}></div>
      <div className={styles['form-item-label']}>{t['form.personal.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.fullName']}</span>
            <span className={styles['form-descriptions-value']}>
              {lang === 'en-US' ? userInfo.fullName : userInfo.fullNameAr ?? '--'}
            </span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.personal.complainant']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {filterEnum(complainantRole[2].key!, 'Complainant')}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.email']}</span>
            <span className={styles['form-descriptions-value']}>{userInfo.email ?? '--'}</span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.mobile']}</span>
            <span className={cs(styles['form-descriptions-value'], 'ltr')}>
              {/* {userInfo.mobile ? `+971${userInfo.mobile}` : '--'} */}
              {formatterMobile(userInfo.mobile)}
            </span>
          </div>
        </div>
      </div>

      <div className={styles['form-confirm-line']}></div>

      <div className={styles['form-item-label']}>{t['form.confirm.complaint.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.confirm.violation.typeA']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.type === 'A'
              ? filterViolationEnum(violation.violationTypeA!, 'ViolationTypeA')
              : '--'}
          </span>
        </div>
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.confirm.violation.typeB']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.type === 'B'
              ? filterViolationEnum(violation.violationTypeB!, 'ViolationTypeB')
              : '--'}
          </span>
        </div>
        {/* <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.complaint.entityName']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.emirateEntity ?? '--'}
          </span>
        </div> */}
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.complaint.description']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.violationDesc ?? '--'}
          </span>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.violationDate']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {violation.violationDate ?? '--'}
            </span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.confirm.incidentDate.title']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {violation.incidentDiscoveredDate ?? '--'}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.confirm.reported.title']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.hasReported
              ? t['form.complaint.reported.radio.yes']
              : t['form.complaint.reported.radio.no']}

            {violation.hasReported
              ? ` (${t['form.complaint.entityName']}: ${violation.refEntity ?? '--'}; ${
                  t['form.complaint.reference']
                }: ${violation.refRefNumber ?? '--'}; ${t['form.complaint.complianceDate']}: ${
                  violation.refYear
                })`
              : ''}
          </span>
        </div>
      </div>

      <div className={styles['form-confirm-line']}></div>

      <div className={styles['form-item-label']}>{t['form.confirm.additional.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.complaint.additional']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.violationAdditionalDetails ?? '--'}
          </span>
        </div>
        {violation.violators?.length ? (
          <div className={styles['form-descriptions-item-hundred']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.confirm.witnesses.title']}
            </span>
            <span className={styles['form-descriptions-value']}>
              <div className={styles['form-confirm-witnesses']}>
                {violation.violators?.map((item, index) => {
                  return (
                    <span className={styles['form-descriptions-value']} key={index}>
                      {item?.concernedParties ?? '--'}
                      <span className="mr-2 ml-2">/</span>
                      {filterEnum(item?.role, 'ViolatorOrWitness')}
                      <span className="mr-2 ml-2">/</span>
                      {filterEnum(item?.nationality, 'Nationality')}
                    </span>
                  )
                })}
              </div>
            </span>
          </div>
        ) : (
          <></>
        )}
        {violation.supportEntities?.length ? (
          <div className={styles['form-descriptions-item-hundred']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.attachments']}
            </span>
            <span className={styles['form-descriptions-value']}>
              <div className={styles['form-confirm-file']}>
                {violation.supportEntities!.map((item, index) => {
                  return (
                    <div className={styles['form-confirm-file-item']} key={index}>
                      <Image src={file} className={styles['file-icon']} alt="file" />
                      <span className={styles['file-text']}>{item.href}</span>
                    </div>
                  )
                })}
              </div>
            </span>
          </div>
        ) : (
          <></>
        )}
      </div>
      <div className={styles['form-confirm-line']}></div>
      <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
        {t['form.confirm.checkbox']}
      </Checkbox>
      <div className={styles['form-button']}>
        <div className={styles['form-button-pre']} onClick={() => setSetup(1)}>
          <Image src={arrowPre} className={styles['button-icon']} alt="pre" />
          <span className={styles['button-text']}>{t['form.button.previous']}</span>
        </div>
        <div className={styles['form-button-next']} onClick={() => submit()}>
          <span className={styles['button-text']}>{t['form.button.submit']}</span>
        </div>
      </div>
    </div>
  )
}
